<!--配送商端-销售管理-手术跟台需求订单列表-->
<template>
  <div class="operation-list">
    <el-container class="container-box">
      <div class="tabs-box">
        <tabs
          :tabs-arr="indexTabsArr"
          @returnIndex="handleTabChange" />
      </div>
      <!-- 搜索查询 -->
      <el-header height="auto">
        <SearchForm
          show-collapse
          :label-width="'140px'"
          :data="operationOrderSearchForm"
          ref="operationOrderSearchForm"
          :compact-data="compactSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="operationOrderList"
        height="400"
        :custom-attr="$TABLE_HEAD['beforeSettle.distributorSide.salesManagement.operatinOrder']"
        :columns="operationOrderColumns"
      >
        <!-- 操作列 -->
        <template
          slot="default-action"
          slot-scope="{row}">
          <el-button
            size="small"
            v-if="row.orderStatus== 2"
            @click.stop="handleDelivery(row)"
            type="text text-primary">发货</el-button>
          <el-button
            size="small"
            v-if="row.orderStatus== 7"
            @click.stop="handleOperationReturn(row)"
            type="text text-primary">术后退回</el-button>
          <el-button
            size="small"
            @click.stop="jumpDetailPage(row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import tabs from '@components/tabs/index.vue'

import { ORDER_STATUS, ORDER_COLUMNS, SEARCH_FORM, indexTabsArr } from './const.js'
import { isObject, cloneDeep, hasIn } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { needOrderList } from '@const/beforeSettleApi'
const headTabs = [0, 2, 7, 5]
export default {
  name: 'OperationList',
  components: { tabs, ElEditable, SearchForm },

  data () {
    return {
      indexTabsArr,
      submitLoading: false,
      // 查询配置信息
      operationOrderSearchForm: SEARCH_FORM,
      // table列表配置信息
      operationOrderColumns: ORDER_COLUMNS,
      operationOrderList: [],
      tableLoading: false,
      // 搜索查询条件
      searchQuery: {},
      // tab查询条件
      tabQuery: {},
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      tabIndex: null
    }
  },
  computed: {
    compactSearchForm () {
      return this.operationOrderSearchForm.slice(0, 2)
    }
  },
  mounted () {
    this.getOperationOrderList()
  },
  methods: {
    // 点击tab事件
    handleTabChange (index) {
      this.tabIndex = this.indexTabsArr[index].val === 'null' ? null : this.indexTabsArr[index].val
      this.curPage = 1
      this.getOperationOrderList()
    },
    // 列表数据
    getOperationOrderList () {
      const query = {
        orderStatus: this.tabIndex || null,
        orderType: 2, // 1寄售2跟台
        page: this.curPage,
        pageSize: this.totalElements,
        ...this.tabQuery,
        ...this.searchQuery
      }
      this.tableLoading = true
      this.submitLoading = true
      this.$axios.post(needOrderList, query)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.operationOrderList = hasIn(data, ['payload', 'content']) ? data.payload.content : []
          this.totalElements = hasIn(data, ['payload', 'totalElements']) ? data.payload.totalElements : 0
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // 发货
    handleDelivery (row) {
      const path = '/distributorSide/salesManagement/operationOrder/deliverGoods'
      const query = {
        id: row.id
      }
      this.$router.push({ path, query })
    },
    // 术后退回
    handleOperationReturn (row) {
      const path = '/distributorSide/salesManagement/operationOrder/operationReturn'
      const query = {
        id: row.id,
        orderCode: row.orderCode
      }
      this.$router.push({ path, query })
    },
    // 详情
    jumpDetailPage (row) {
      const path = '/distributorSide/salesManagement/operationOrder/read'
      const query = {
        id: row.id
      }
      this.$router.push({ path, query })
    },
    // 查询
    searchForm (condition) {
      this.searchQuery = condition
      this.getOperationOrderList()
    },
    // 重置
    resetForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getOperationOrderList()
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getOperationOrderList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getOperationOrderList()
    }
  }
}
</script>

<style lang="less">
.operation-list {
  height: 100%;
  overflow: auto;

  .container-box {
    overflow: auto;
    height: 100%;

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
